<template>
	<view class="checkbox-tabs">
		<view class="item" :class="{current:(tabItem.option_hash==value)}" v-for="(tabItem,tabItemKey) in items" @click="click(tabItem)"
		 :key="tabItemKey">{{tabItem.value}}</view>
	</view>
</template>
<script>
	export default {
		name: 'MyTabs',
		props: {
			items: {
				type: Array,
				default: null
			},
			/*
			value: {
				default: null
			}
			*/
		},
		data() {
			return {
				current: this.value
			}
		},
		computed:{
			value(){
				for(let i = 0; i<this.items.length;i++) {
					if (this.items[i].option_status==1) {
						return this.items[i].option_hash
					}
				}
				return this.items.length>0?this.items[0].option_hash:null
			}
		},
		methods: {
			click(item) {
				for(let i = 0; i<this.items.length;i++) {
					if (this.items[i].option_hash == item.option_hash) {
						this.items[i].option_status = 1
					} else {
						this.items[i].option_status = 0
					}
				}
				this.$emit('onTabChange', item.value)
			}
		}
	}
</script>
<style lang="scss">
	.checkbox-tabs {
		
		display: flex;
		font-size: $uni-font-size-base;
		.item {
			border: 1upx solid #eee;
			border-right: none;
			padding: 10upx 10upx;
			cursor: pointer;
			min-width: 70upx;
			text-align: center;
			display: inline-block;
			&:last-child{
				border-right: 1upx solid #eee;
			}
		}
		.current {
			background-color: #2d8cf0;
			color: white;
		}
	}
</style>
